<!-- src/views/EquipmentMaintenance.vue -->
<template>
  <div class="equipment-maintenance-container">
    <h1>设备维护管理</h1>

    <!-- 步骤条 -->
    <el-steps :active="activeStep" finish-status="success" simple>
      <el-step title="设备档案管理" />
      <el-step title="执行设备维护" />
      <el-step title="状态监控分析" />
    </el-steps>

    <!-- Step 1: 设备档案管理 -->
    <div v-show="activeStep === 1" class="step-content">
      <el-card>
        <h3>新增设备档案</h3>
        <el-form :model="equipmentForm" label-width="120px">
          <el-form-item label="设备名称">
            <el-input v-model="equipmentForm.name" />
          </el-form-item>
          <el-form-item label="型号">
            <el-input v-model="equipmentForm.model" />
          </el-form-item>
          <el-form-item label="购买日期">
            <el-date-picker v-model="equipmentForm.purchase_date" type="date" placeholder="选择日期" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="equipmentForm.status" placeholder="请选择">
              <el-option label="正常" value="正常" />
              <el-option label="故障" value="故障" />
              <el-option label="停用" value="停用" />
            </el-select>
          </el-form-item>
          <el-form-item label="位置">
            <el-input v-model="equipmentForm.location" />
          </el-form-item>
          <el-form-item label="部门ID">
            <el-input v-model="equipmentForm.department_id" type="number" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitEquipment">保存设备档案</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- Step 2: 执行设备维护 -->
    <div v-show="activeStep === 2" class="step-content">
      <el-card>
        <h3>执行设备维护</h3>
        <el-form :model="maintenanceForm" label-width="120px">
          <el-form-item label="设备ID">
            <el-input v-model="maintenanceForm.equipment_id" type="number" />
          </el-form-item>
          <el-form-item label="维护日期">
            <el-date-picker v-model="maintenanceForm.maintenance_date" type="date" placeholder="选择日期" />
          </el-form-item>
          <el-form-item label="维护内容">
            <el-input type="textarea" v-model="maintenanceForm.description" />
          </el-form-item>
          <el-form-item label="费用">
            <el-input v-model="maintenanceForm.cost" type="number" />
          </el-form-item>
          <el-form-item label="技术员ID">
            <el-input v-model="maintenanceForm.technician_id" type="number" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitMaintenance">提交维护记录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- Step 3: 状态监控分析 -->
    <div v-show="activeStep === 3" class="step-content">
      <el-card>
        <h3>状态监控分析</h3>
        <el-form :model="monitorForm" label-width="120px">
          <el-form-item label="设备ID">
            <el-input v-model="monitorForm.equipment_id" type="number" />
          </el-form-item>
          <el-form-item label="监控数据/状态描述">
            <el-input type="textarea" v-model="monitorForm.description" />
          </el-form-item>
          <el-form-item label="费用（如有）">
            <el-input v-model="monitorForm.cost" type="number" />
          </el-form-item>
          <el-form-item label="技术员ID">
            <el-input v-model="monitorForm.technician_id" type="number" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitMonitor">提交监控记录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 控制按钮 -->
    <div class="step-actions">
      <el-button @click="prevStep" :disabled="activeStep === 1">上一步</el-button>
      <el-button type="primary" @click="nextStep" :disabled="activeStep === 3">下一步</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import equipmentApi from "@/api/equipmentApi";
import maintenanceRecordApi from "@/api/maintenanceRecordApi";

const activeStep = ref(1);

// Step1: 设备档案
const equipmentForm = ref({
  name: "",
  model: "",
  purchase_date: "",
  status: "",
  location: "",
  department_id: null,
});

// Step2: 维护记录
const maintenanceForm = ref({
  equipment_id: null,
  maintenance_date: "",
  description: "",
  cost: null,
  technician_id: null,
});

// Step3: 监控记录（仍然存到 maintenance_record，只是 type=监控）
const monitorForm = ref({
  equipment_id: null,
  description: "",
  cost: null,
  technician_id: null,
});

// Step 控制
const nextStep = () => {
  if (activeStep.value < 3) activeStep.value++;
};
const prevStep = () => {
  if (activeStep.value > 1) activeStep.value--;
};

// 提交：设备档案
const submitEquipment = async () => {
  try {
    await equipmentApi.add(equipmentForm.value);
    ElMessage.success("设备档案保存成功");
  } catch {
    ElMessage.error("保存失败");
  }
};

// 提交：维护记录
const submitMaintenance = async () => {
  try {
    await maintenanceRecordApi.add(maintenanceForm.value);
    ElMessage.success("维护记录提交成功");
  } catch {
    ElMessage.error("提交失败");
  }
};

// 提交：监控记录
const submitMonitor = async () => {
  try {
    await maintenanceRecordApi.add({
      ...monitorForm.value,
      description: "监控分析: " + monitorForm.value.description,
    });
    ElMessage.success("监控记录提交成功");
  } catch {
    ElMessage.error("提交失败");
  }
};
</script>

<style scoped>
.equipment-maintenance-container {
  padding: 20px;
}
.step-content {
  margin: 20px 0;
}
.step-actions {
  margin-top: 20px;
  text-align: center;
}
</style>
